<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot name="content">
      <ul>
        <li v-for="item in listData" :key="item" v-text="item"></li>
      </ul>
    </slot>
    <div class="extrat">
      <slot name="extrat"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", "listData"],
};
</script>

<style scoped lang="scss">
.category {
  background: skyblue;
  width: 200px;
  min-height: 300px;
  padding: 1rem;

  & h3 {
    text-align: center;
    background: orange;
  }

  & img,
  & video {
    width: 100%;
    object-fit: cover;
  }
  & .extrat {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
  }
}
</style>
